<template>
    <div>
        <h2>计算属性的练习：购物车</h2>
         <div class="item" v-for="(item,index) in cartList" :key="index">
            <!-- 布局 -->
               <div :class="item.isSelect?'item-left-Active':'item-left'" @click="select(index)" ></div>
                <div>{{item.name}}， </div> 
                <div>价格：{{item.pic}}</div>

                <div><button @click="reduce(index)" v-if="item.num>1">-</button>{{item.num}} <button @click="add(index)">+</button></div>
         </div>
         <h2>总价：{{allpic}}</h2>
      <!-- 
        1:展示数据=》for
        2: 页面加载 默认选中 ,
            1）默认选中=》动态样式  ,给每一项添加一个属性isSelect为true
        
        3:计算总价

        4:商品添加和减少

       -->
    </div>
</template>

<script>
export default {
   data(){
    return{
        cartList:[{pic:100,num:1,name:'手机1',isSelect:true},{pic:200,num:1,name:'手机2',isSelect:true}],
       
    }
   },
   methods:{
    select(index){
          //选中于不选中
          // 根据index 找到那一下
          this.cartList[index].isSelect = !this.cartList[index].isSelect
    }
   },
   computed:{
    allpic(){
       // 价格*数量+所有
       let arrPic = 0
       for(let i=0;i<this.cartList.length;i++){
        // 判断
               arrPic += this.cartList[i].pic*this.cartList[i].num
       }

        return arrPic
    }
   },
   methods:{
    reduce(index){
          this.cartList[index].num =  this.cartList[index].num-1
    },
    add(index){
        console.log(index);
       this.cartList[index].num =  this.cartList[index].num+1
    }
   }
   
}
</script>

<style>
   .item{
    display: flex;
    margin-bottom:20px;
    align-items: center;
   }
   .item-left{ 
    height:40px;
    width: 40px;
    border:1px solid black;
    background: #fff;
    border-radius: 50%;
   }
   .item-left-Active{
    height:40px;
    width: 40px;
    border:1px solid black;
    background: red;
    border-radius: 50%;
   }
</style>